<template>
  <div id="myFocusPage">
    <x-header title="红包" :right-options="{showMore: true}" @on-click-more="show = true"></x-header> 
    <tab v-model="index" :line-width=2 active-color='#fc378c' prevent-default @on-before-index-change="switchTabItem">
      <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2"  :key="index">{{item}}</tab-item>
    </tab>
    <swiper id="mySwiper" v-model="index" :show-dots="false" ref="mySwiper">
      <shop-cell :list="list"></shop-cell>
    </swiper>
  </div>
</template>



<script>
import { Tab, TabItem, Swiper, SwiperItem, XHeader } from "vux";
import ShopCell from "../../components/toolComponent/shopCell.vue";
import $ from "jquery";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";

const list = () => ["红包", "购物券"];
export default {
  components: {
    ShopCell,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  data() {
    return {
      list: [
      ],
      list2: list(),
      demo2: "商品",
      demoDisabled: "A",
      index: 0,
      redPacketList: [
       
      ],
      youhuiList: [
        {
          src: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            '<p><span>标题1</span><span style="float:right;color:#cc0010;font-size:18px">￥0</span></p>',
          desc: "<p>由各种物质组成的巨型球状天体，叫做星球。</p><p>星球有一定的形状，有自己的运行轨道。</p>",
          url: "/component/cell"
        }
      ]
    };
  },
  mounted: function() {
    this.$nextTick(function() {
      this.$refs.mySwiper.xheight = "300px";
      var that = this;
      $(function() {
        var windowHeight = $(window).height();
        var headerHeight = $(".vux-header").outerHeight();
        var tabHeight = $(".vux-tab").outerHeight();
        that.$refs.mySwiper.xheight =
          windowHeight - headerHeight - tabHeight + "px";
        $(".vux-swiper").css({ overflow: "scroll" });
      });
    });
  },
  methods: {
    switchTabItem(index) {
      this.$vux.loading.show({
        text: "loading"
      });
      var that = this;
      setTimeout(() => {
        this.$vux.loading.hide();
        that.$data.index = index;
        if (index == 0) {
          this.redPackReq()
          // that.$data.list = this.redPacketList;
        }
        if (index == 1) {
          that.$data.list = this.youhuiList;
        }
        $(".vux-swiper").scrollTop(0);
      }, 500);
    },
    // 红包列表
    redPackReq(){
       var datas = qs.stringify({
        userid:"2017121610485939",
      });
      axios
        .post(homeUrl() + "redpackApi/", datas, { emulateJSON: true })
        .then(
          result => {
            console.log(result);
            if(result.data.status=="ok"){
            var listdata=[];
            var datasList = result.data.data;
            for(var i=0;i<datasList.length;i++){
              var obj={};
              obj.src="static/cart/redpack.png";
              obj.title='<p><span>'+datasList[i].title+'</span><span style="float:right;color:#cc0010;font-size:18px">￥'+datasList[i].money+'</span></p>',
              obj.desc= '<p style="line-height:20px">'+datasList[i].description+'</p><p>'+datasList[i].starttime+'-'+datasList[i].endtime+'</p>'

            // console.log(obj)
              listdata.push(obj)
            }
            console.log(listdata)
            this.list=listdata
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    }
  },
  created(){
    this.redPackReq()
  }
};
</script>

<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";

#myFocusPage .vux-slider {
  overflow: unset;
}

#myFocusPage #mySwiper .vux-swiper {
  overflow: unset;
}

.tab-swiper {
  background-color: #fff;
  height: 100px;
}
</style>